<template>
  <!-- 访问深度 -->
  <div class="component-access-depth">
    <title-bar
      :title="$t('dataAnalysis.depthOfVisit')"
      :tips-content="$t('dataAnalysis.visiContent')"
    />
    <div class="chart">
      <div
        id="depth-echart-left"
        class="chart-left"
        style="width: 100%; height: 400px"
      />
      <div
        id="depth-echart-right"
        class="chart-right"
        style="width: 100%; height: 400px"
      />
    </div>
  </div>
</template>

<script setup>
import * as $echarts from 'echarts'
import titleBar from './title-bar.vue'

const props = defineProps({
  depthData: {
    type: Object,
    default: () => ({
      xData: [],
      seriesData: [],
      seriesData2: []
    })
  }
})

watch(() => props.depthData, () => {
  getDepthEchartLeft()
  getDepthEchartRight()
}, { deep: true })

// 获取访问深度左边的柱状数据图
const getDepthEchartLeft = () => {
  // 有的话就获取已有echarts实例的DOM节点
  let deepLeftMyChart = $echarts.getInstanceByDom(document.getElementById('depth-echart-left'))
  // 如果不存在，就进行初始化
  if (deepLeftMyChart == null) {
    deepLeftMyChart = $echarts.init(document.getElementById('depth-echart-left'))
  }
  const option = {
    color: ['#0595d4'],
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: [`${$t('dataAnalysis.numberOfVisitors')}`]
    },
    grid: {
      left: 30,
      right: 40,
      top: 55,
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: props.depthData.xData,
      // data: ['1页', '2页', '3页', '4页', '5页', '6-10页', '11-20页', '20+页'],
      // xAxis的属性，设置x轴文本不隐藏，同理yAxis也有
      axisLabel: {
        interval: 0, // 坐标轴刻度标签的显示间隔
        rotate: 40 // 标签倾斜的角度
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          color: ['#E0E6F1'],
          width: 1,
          type: 'solid'
        }
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    series: [{
      name: $t('dataAnalysis.numberOfVisitors'),
      data: props.depthData.seriesData,
      type: 'bar',
      barWidth: '45%',
      itemStyle: {
        color: '#02a1e9',
        borderRadius: [4, 4, 0, 0]
      }
    }]
  }
  deepLeftMyChart.setOption(option)
  window.addEventListener('resize', function () {
    deepLeftMyChart.resize()
  })
}

// 获取访问深度右边的饼状数据图
const getDepthEchartRight = () => {
  // 有的话就获取已有echarts实例的DOM节点
  let deepRightMyChart = $echarts.getInstanceByDom(document.getElementById('depth-echart-right'))
  // 如果不存在，就进行初始化
  if (deepRightMyChart == null) {
    deepRightMyChart = $echarts.init(document.getElementById('depth-echart-right'))
  }
  const option = {
    title: {
      text: $t('dataAnalysis.numberOfVisitors'),
      left: 'center',
      textStyle: {
        color: '#666',
        fontWeight: '500',
        fontSize: 12
      }
    },
    color: ['#349EFF', '#FFCC39', '#3DD86B', '#C859F2', '#FF8620', '#3BCAFF', '#FF6850', '#8185FF'],
    tooltip: {
      trigger: 'item',
      formatter: `{b} <br/>{a}: {c} <br/>${$t('home.Percentage')}{d}%` // a:series.data.name\b:series.name\c:series.data.value\d:自动计算百分比
    },
    series: [
      {
        name: $t('dataAnalysis.numberOfVisitors'),
        type: 'pie',
        radius: ['72%', '28%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: { // 相应数据展示，饼图内部样式的设置
            show: true,
            fontSize: '14',
            color: '#888'
          }
        },
        labelLine: {
          show: false
        },
        data: props.depthData.seriesData2
      }
    ],
    legend: {
      orient: 'vertical',
      top: 20,
      right: 'left',
      data: props.depthData.xData
    }
  }
  deepRightMyChart.setOption(option)
  window.addEventListener('resize', function () {
    deepRightMyChart.resize()
  })
  setTimeout(() => {
    deepRightMyChart.resize()
  }, 300)
}

</script>

<style lang="scss" scoped>
.component-access-depth {
  width: 100%;
  .chart {
    width: 100%;
    display: flex;
    .chart-left {
      width: 35%;
    }
    .chart-right {
      width: 65%;
      padding: 0 0 20px;
    }
  }
}
</style>
